/**
 *
 *
 * @author TOTORO
 * @date 2021/4/23 14:25
 */
var isCheck = false;
(function($){
    $.fn.sliding = function(options){
        var x, drag = this, isMove = false, defaults = {
        };
        var options = $.extend(defaults, options);
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>'+
            '<div class="drag_text" onselectstart="return false;" unselectable="on" id="font">请按住滑块，拖动到最右边</div>'+
            '<div class="handler handler_bg"></div>';
        this.append(html);

        var handler = drag.find('.handler');
        var loading = handler.find('.loading');
        var drag_bg = drag.find('.drag_bg');
        var text = drag.find('.drag_text');
        var maxWidth = drag.width() - handler.width();  //能滑动的最大间距

        //鼠标按下时候的x轴的位置
        handler.mousedown(function(e){
            isMove = true;
            x = e.pageX - parseInt(handler.css('left'), 10);
        });

        //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).mousemove(function(e){
            var _x = e.pageX - x;
            if(isMove){
                if(_x > 0 && _x <= maxWidth){
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                }else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件
                    dragOk();
                }
            }
        }).mouseup(function(e){
            isMove = false;
            var _x = e.pageX - x;
            if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.animate({'left': 0});
                drag_bg.animate({'width': 0});
            }
        });

        //清空事件
        function dragOk(){
            drag_bg.css('width','260px');
            handler.css('left','259px').removeClass('handler_bg').addClass('handler_ok_bg');
            isCheck = true;
            setTimeout(function () {
                text.html("验证通过");
            },300);
            text.html('加载中<img class="loading" src="//img.lanrentuku.com/img/allimg/1212/5-121204193939-50.gif" style="width: 20px; height: 20px; position:relative; top:6px; left: 5px">');
            text.css('color','white')
            text.removeClass('run-animation');
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
        }
    }
})(jQuery);

var st = setInterval('sss()', 2500);
function sss() {
    if(isCheck){
        clearInterval(st);
        return;
    }
    // 获取
    var dh = document.getElementById('font');
    dh.classList.add('run-animation');
    setTimeout(function () {
        dh.classList.remove('run-animation');
    }, 700);
}